prefers-color-scheme

支援度:Can I Use

接續前一天的Dark Mode/Light Mode切換，在網頁最外層套上主題class，是需要程式輔助判斷套上，如果沒有程式幫忙的時候呢?

CSS出了一個media特性prefers-color-scheme，可以自動檢測使用者

• 是否支援主題切換
• 是否將系統設定為亮色或暗色主題
  如果為true，則可以使用prefers-color-scheme

@media (prefers-color-scheme:light){
  .container{
    background:#fff;
    color:#1b1b1b;
  }
}

@media (prefers-color-scheme:dark){
  .container{
    background:#1b1b1b;
    color:#fff;
  }
}

結合前一天的CSS變數的另種寫法:

.container{
  background:var(--background-primary);
  color:var(--text-primary);
}

@media (prefers-color-scheme:light){
  :root{
      --background-primary:#fff;
      --text-primary:#1b1b1b;
  }
}

@media (prefers-color-scheme:dark){
  :root{
      --background-primary:#1b1b1b;
      --text-primary:#fff;
  }
}

Codepen範例

IT15-Day04-Create A Dark/Light Mode Switch with prefers-color-scheme
參考MDN寫的一個小範例，大家可以試試看!

2023/09/19實測發現:
主題偵測的是系統(裝置)的Light Mode/Dark Mode變換，而不是瀏覽器的Light Mode/Dark Mode。

參考來源

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://developer.mozilla.org/zh-CN/play